<template>
  <div class="w-full">
    <!-- 用于首页推荐商家 -->
    <ul v-if="mode === 'detailed'" class="w-full">
      <li v-for="(business, index) in businessList" :key="index" @click="handleBusinessClick(business)"
          class="w-full box-border p-2.5vw select-none border-b border-gray-300 cursor-pointer flex">
        <img :src="business.img" :alt="business.name" class="w-18vw h-18vw">
        <div class="w-full box-border pl-3vw">
          <div class="flex justify-between items-center mb-2vw">
            <h3 class="text-4vw text-gray-800">{{ business.name }}</h3>
            <div class="w-1.6vw h-3.4vw bg-gray-600 text-white text-4vw mr-4vw flex-center">&#8226;</div>
          </div>
          <div class="flex justify-between items-center mb-2vw text-3.1vw">
            <div class="flex items-center">
              <i class="fa fa-star text-yellow-500 mr-0.5vw" v-for="n in 5" :key="n"></i>
              <p class="text-gray-600 ml-1vw">{{ business.rating }} 月售{{ business.sales }}单</p>
            </div>
            <div class="bg-primary text-white text-2.4vw rounded-2px px-0.6vw">
              蜂鸟专送
            </div>
          </div>
          <div class="flex justify-between items-center mb-2vw text-gray-600 text-3.1vw">
            <p>&#165;{{ business.minPrice }}起送 | &#165;{{ business.deliveryFee }}配送</p>
            <p>{{ business.distance }}km | {{ business.deliveryTime }}分钟</p>
          </div>
          <div class="flex items-center mb-3vw">
            <div class="border border-gray-300 text-2.8vw text-gray-600 bg-gray-100 px-1vw py-0.5vw rounded-2px">
              {{ business.description }}
            </div>
          </div>
          <div v-for="(promotion, pIndex) in business.promotions" :key="pIndex" 
               class="flex justify-between items-center mb-2vw">
            <div class="flex items-center text-2.8vw">
              <div class="text-white text-2.4vw px-1vw py-0.5vw rounded-2px mr-2vw flex-center"
                   :style="{ backgroundColor: promotion.type === '新' ? '#70BC46' : '#F1884F' }">
                {{ promotion.type }}
              </div>
              <p class="text-gray-600">{{ promotion.info }}</p>
            </div>
            <div v-if="pIndex === 0 && business.promotions.length > 1" 
                 class="flex items-center text-2.8vw text-gray-500">
              <p>{{ business.promotions.length }}个活动</p>
              <i class="fa fa-caret-down ml-1vw"></i>
            </div>
          </div>
        </div>
      </li>
    </ul>

    <!-- 简洁模式 - 用于商家列表页 -->
    <ul v-else class="w-full">
      <li v-for="business in businessList" :key="business.id" @click="handleBusinessClick(business)"
          class="w-full box-border p-2.5vw select-none border-b border-gray-300 cursor-pointer flex">
        <div class="relative mr-3vw">
          <img :src="business.img" :alt="business.name" class="w-18vw h-18vw">
          <div v-if="business.quantity" 
               class="absolute -top-1.5vw -right-1.5vw w-5vw h-5vw bg-danger text-white text-2.4vw rounded-50% flex-center">
            {{ business.quantity }}
          </div>
        </div>
        <div class="flex-1">
          <h3 class="text-4vw text-gray-800 mb-1vw">{{ business.name }}</h3>
          <p class="text-3vw text-gray-600 mb-1vw">&#165;{{ business.minPrice }}起送 | &#165;{{ business.deliveryFee }}配送</p>
          <p class="text-2.8vw text-gray-500">{{ business.description }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, type PropType } from 'vue'
import type { Business } from '@/composables/useOrder'

export default defineComponent({
  name: 'Shopping',
  props: {
    businessList: {
      type: Array as PropType<Business[]>,
      required: true,
      default: () => []
    },
    mode: {
      type: String,
      default: 'simple', // 'detailed' 或 'simple'
      validator: (value: string) => ['detailed', 'simple'].includes(value)
    }
  },
  emits: ['business-click'],
  setup(props, { emit }) {
    const handleBusinessClick = (business: Business) => {
      emit('business-click', business)
    }

    return {
      handleBusinessClick
    }
  }
})
</script> 